<template>
  <!--数量-->
  <div class="welcome_container">
    <div class="nums">
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-shijuan"></span>
          <span>试卷总数</span>
        </div>
        <div class="num">{{examPaperCount}}</div>
      </div>
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-subject"></span>
          <span>题目总数</span>
        </div>
        <div class="num">{{questionCount}}</div>
      </div>
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-exam"></span>
          <span>答卷总数</span>
        </div>
        <div class="num">{{doExamPaperCount}}</div>
      </div>
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-bianji"></span>
          <span>答题总数</span>
        </div>
        <div class="num">{{doQuestionCount}}</div>
      </div>
    </div>
    <!--用户活跃数-->
    <div class="echarts">
      <div class="main active-user-num" id="echarts-month-user" style="width: 100%; height: 400px"></div>
    </div>
    <div class="echarts">
      <div class="main active-user-num" id="echarts-month-question" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>
<script>
//导入echarts

export default {
    data(){
      return {
        examPaperCount: 0,//试卷总数
        questionCount: 0,//题目总数
        doExamPaperCount: 0,//答题总数
        doQuestionCount: 0, //答题总数
        echartsUserAction: null,//用户活跃数
        echartsUserActionData:[],
        echartsQuestion: null, //题目月总数
        echartsQuestionData:[],
        mothDayText:[]
      }
    },
    created(){

    },
    mounted(){
      //初始化用户活跃数
      this.init();
      this.echartsUserAction = this.$echarts.init(document.getElementById("echarts-month-user"),'macarons');
      this.echartsQuestion = this.$echarts.init(document.getElementById("echarts-month-question"));
      this.getRequest("/api/admin/dashboard/index").then( resp => {
        if(resp && resp.code == 200){
          this.examPaperCount = resp.obj.examPaperCount
          this.questionCount = resp.obj.questionCount
          this.doExamPaperCount = resp.obj.doExamPaperCount
          this.doQuestionCount = resp.obj.doQuestionCount
          this.echartsUserAction.setOption(this.setCharts("用户活跃数",resp.obj.mothDayText,resp.obj.mothDayUserActionValue));
          this.echartsQuestion.setOption(this.setCharts("题目月总数",resp.obj.mothDayText,resp.obj.mothDayDoExamQuestionValue));
        }
      })
     
    },
    methods:{
      //初始化用户活跃数 echarts
      init(){
       
        // this.echartsUserAction.setOption(this.setCharts("用户活跃数",this.mothDayText,this.echartsUserActionData));
        // this.echartsQuestion.setOption(this.setCharts("题目月总数",this.mothDayText,this.echartsQuestionData));
        window.addEventListener("resize", ()=>{
          this.echartsUserAction.resize();
          this.echartsQuestion.resize();
        })
     },
     setCharts(title,label,value){
        return {
          title:{
            text: title,
            x: 'center'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: label
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: value,
              type: 'line',
              areaStyle: {}
            }
          ]
        };
      },
      //获取一个月的天数
      getCountDays(){
        let curDate = new Date();
        let curMonth = curDate.getMonth();
        curDate.setMonth(curMonth + 1);
        curDate.setDate(0);
        return curDate.getDate();
      },
      //获取当前月份的每一天
      getEveryDay(){
        let monthData = []
        let day = this.getCountDays();
        //获取当前日期
        let date = new Date();
        //获取当前月份
        let nowMonth = date.getMonth() + 1;
        //对月份进行处理，1-9号在前面添加一个“0”
        if(nowMonth >=1 && nowMonth <=9){
          nowMonth = "0" + nowMonth;
        }
        for(let k=1;k<=day;k++){
          if(k>=1 && k<=9){
            k = "0" + k;
          }
          monthData.push(`${k}`);
        }
        return monthData;
      }
    }
}
</script>

<style  lang="scss" scoped>
.welcome_container{

}
.nums{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  .num-item{
    display: flex;
    width: 23%;
    height: 180px;
    border-radius: 10px;
    @include prefix(box-shadow,0 2px 4px #0000003b);
    .title{
      flex:1;
      display: flex;
      justify-content: center;
      margin: 22px 10px;
        .iconfont{
          font-size: 26px;
          margin-right: 10px;
        }
        span:last-child{
          margin-top: 1px;
        }
    }
    .num{
      flex:1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin: 0 8px 15px 0;
      color: #333333;
      font-weight: bold;
      font-size: 44px;
    }
    &:nth-child(1){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(102,187,106,0.2) 20%,rgba(102,187,106,1));
      .iconfont{
        color: rgba(102,187,106,1);
      }
    }
    &:nth-child(2){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(58,146,255,0.2) 20%,rgba(58,146,255,1));
      .iconfont{
        color: rgba(58,146,255,1);
      }
    }
     &:nth-child(3){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(64,201,198,0.2) 20%,rgba(64,201,198,1));
      .iconfont{
        color: rgba(64,201,198,1);
      }
    }
     &:nth-child(4){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(245,108,108,0.2) 20%,rgba(245,108,108,1));
      
      .iconfont{
        color: rgba(245,108,108,1);
      }
    }
  }
}
.echarts{
  width:100%;
  height: 445px;
  margin: 30px 20px;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  @include prefix(box-shadow,0 2px 4px #0000003b);
}
</style>